*{margin:0;padding:0}
body{background-image:url(../img/bg.jpg);height:550px;background-repeat:no-repeat;background-size:cover;font-family:sans-serif}
.mainbody{height:440px;width:400px}
.middle{top:50%;left:50%;position:absolute;transform:translate(-50%,-50%)}
.form-box{width:100%;height:100%;margin:auto;background:rgba(255,255,255,.5);border-radius:40px}
.title{position:relative;text-align:center;top:10px}
.input-normal1,.input-normal2{width:220px;height:38px;padding:0;text-align:center;border-radius:20px;outline:0;display:block;transition:.3s;border:1px solid #e6e6e6}
.input-normal1{margin:30px auto}
.input-normal2{margin:1px auto 20px auto}
.icon{position:relative;width:220px;left:89px}
.icon i{position:absolute;top:13px;left:-30px}
.icon label{width:200px;position:relative;top:-15px;font-size:13px}
.pswd #viewpwd{position:absolute;font-size:15px;width:15px;height:15px;top:13px;left:200px;color:#000;cursor:pointer;z-index:100}
.btn-submit{width:100px;height:36px;margin:auto;font-size:18px;text-align:center;color:#fff;border-radius:20px;display:block;background:#2f4f4f;transition:.3s}
::-webkit-scrollbar{display:none}
.register{overflow-y:scroll;-webkit-overflow-y:scroll;-khtml-overflow-y:scroll;-moz-overflow-y:scroll;-ms-overflow-y:scroll;-o-overflow-y:scroll;height:311px;position:relative;top:15px}
p{padding:0;font-size:16px;color:#fff;display:block;text-align:center}
a{color:#0ff;cursor:pointer;text-decoration:none;color:#000}
.succeed{position:relative;top:10px;display:none}
.return{position:relative;text-align:center}
.footer p{position:relative;bottom:20px}
.return a{margin:0;padding:0;position:relative}
.front .return a{bottom:-100px}
.back .return a{bottom:10px}
.front{-webkit-transform:rotateY(0);-khtml-transform:rotateY(0);-moz-transform:rotateY(0);-ms-transform:rotateY(0);-o-transform:rotateY(0);transform:rotateY(0)}
.back{-webkit-transform:rotateY(-180deg);-khtml-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-ms-transform:rotateY(-180deg);-o-transform:rotateY(-180deg);transform:rotateY(-180deg)}
.back,.front{position:absolute;overflow-y:hidden;-webkit-overflow-y:hidden;-khtml-overflow-y:hidden;-moz-overflow-y:hidden;-ms-overflow-y:hidden;-o-overflow-y:hidden;-webkit-backface-visibility:hidden;-khtml-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden;transition:.3s linear}
.middle-flip .front{-webkit-transform:rotateY(180deg);-khtml-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg)}
.middle-flip .back{-webkit-transform:rotateY(0);-khtml-transform:rotateY(0);-moz-transform:rotateY(0);-ms-transform:rotateY(0);-o-transform:rotateY(0);transform:rotateY(0)}
